<template>
  <div class="box">
    <!-- 内容顶部搜索框，条件查询学员信息和学员信息新增开始 -->
    <el-form
      :inline="true"
      :model="formStudent"
      ref="formStudent"
      class="demo-form-inline demo-form"
      style="
        display: flex;
        align-items: center;
        height: 100px;
        margin-bottom: 18px;
        display: flex;
        flex-direction: column;
        border-radius: 20px;
        transition: box-shadow 0.5s linear;
      "
    >
      <el-form-item
        style="height: 40px; width: 100%; margin-bottom: 15px; text-align: left"
      >
        <el-input
          v-model="formStudent.name"
          placeholder="请输入学员姓名"
          style="margin-right: 15px; width: 15%"
        ></el-input>
        <el-input
          v-model="formStudent.state"
          placeholder="请输入状态"
          style="margin-right: 15px; width: 15%"
        ></el-input>
        <el-input
          v-model="formStudent.inviter"
          placeholder="请输入邀约人"
          style="margin-right: 15px; width: 15%"
        ></el-input>
        <el-date-picker
          v-model="formStudent.startCreateTime"
          type="date"
          placeholder="选择开始时间"
          style="margin-right: 15px; width: 15%"
        >
        </el-date-picker>
        <el-date-picker
          v-model="formStudent.endCreateTime"
          type="date"
          placeholder="选择结束时间"
          style="margin-right: 15px; width: 15%"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        style="height: 40px; width: 100%; margin-bottom: 0px; text-align: left"
      >
        <el-input
          v-model="formStudent.teacher"
          placeholder="请输入课任老师"
          style="margin-right: 15px; width: 21%"
        ></el-input>
        <el-input
          v-model="formStudent.enable"
          placeholder="请输入目前状态"
          style="margin-right: 15px; width: 21%"
        ></el-input>
        <el-select
          v-model="formStudent.education"
          placeholder="请选择学历"
          style="margin-right: 15px; width: 21%"
        >
          <el-option label="请选择学历" value=""></el-option>
          <el-option label="硕士" value="硕士"></el-option>
          <el-option label="本科" value="本科"></el-option>
          <el-option label="专科" value="专科"></el-option>
        </el-select>
        <el-button
          type="primary"
          @click="onSubmit"
          style="margin-left: 2px; min-width: 40px"
          >查询</el-button
        >
        <el-button type="primary" @click="increased" style="min-width: 40px"
          >新增</el-button
        >
        <!-- <el-button @click="resetForm('formStudent')" type="primary"
          >重置</el-button
        > -->
      </el-form-item>
    </el-form>
    <!-- 内容顶部搜索框，条件查询学员信息和学员信息新增结束 -->

    <!-- 展示学员信息区域开始 -->
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      height="calc(100vh - 232px )"
    >
      <el-table-column prop="name" label="姓名" min-width="100" fixed>
      </el-table-column>
      <el-table-column prop="state" label="状态" min-width="100">
      </el-table-column>
      <el-table-column prop="inviter" label="邀约人" min-width="100">
      </el-table-column>
      <el-table-column prop="createTime" label="开始时间" min-width="100">
      </el-table-column>
      <el-table-column prop="teacher" label="课任教师" min-width="100">
      </el-table-column>
      <el-table-column prop="enable" label="日前状态" min-width="100">
      </el-table-column>
      <el-table-column prop="education" label="学历" min-width="100">
      </el-table-column>
      <el-table-column prop="school" label="毕业院校" min-width="100">
      </el-table-column>
      <el-table-column label="操作" min-width="100" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-share"
            @click="goto(scope.row)"
            size="small"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 展示学员信息区域结束 -->

    <!-- 点击新增弹出的新增学员信息的对话框(el-dialog)开始 -->
    <el-dialog
      title="新增学员信息"
      :visible.sync="dialogFormVisible"
      append-to-body
    >
      <el-form :model="form">
        <el-form-item label="学员姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-input v-model="form.state" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邀约人" :label-width="formLabelWidth">
          <el-input v-model="form.inviter" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="任课老师" :label-width="formLabelWidth">
          <el-input v-model="form.teacher" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="日前状态" :label-width="formLabelWidth">
          <el-input v-model="form.enable" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学历" :label-width="formLabelWidth">
          <el-input v-model="form.education" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="毕业院校" :label-width="formLabelWidth">
          <el-input v-model="form.school" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 点击新增弹出的新增学员信息的对话框(el-dialog)结束 -->

    <!-- 底部分页开始 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-sizes="[20, 50, 100]"
      :page-size="limit"
      layout=" prev, pager, next,->,sizes,total"
      :total="totalCount"
    >
    </el-pagination>
    <!-- 底部分页结束 -->
  </div>
</template>

<script>
import axios from "axios";
import {add,find} from '../../api/student'
export default {
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      form: {
        name: "",
        state: "",
        inviter: "",
        teacher: "",
        enable: "",
        createTime: "",
        school: "",
        education: "",
      },
      formLabelWidth: "120px",
      formStudent: {
        name: "",
        state: "",
        inviter: "",
        teacher: "",
        enable: "",
        startCreateTime: "",
        endCreateTime: "",
        school: "",
        education: "",
      },
      page: 1,
      limit: 20,
      totalCount: 0,
    };
  },
  mounted() {
    this.findAll();
  },
  methods: {
    // 重置表单事件函数
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleSizeChange(val) {
      this.limit = val;
      // console.log(`每页 ${val} 条`);
      this.findAll();
      // 用户选择后，再次请求后端，重新传递数据
    },
    increased() {
      this.dialogFormVisible = true;
    },
    async submitForm() {
      this.dialogFormVisible = false;
      if (this.form.enable === "在职") {
        this.form.enable = 1;
      } else if (this.form.enable === "离职") {
        this.form.enable = 0;
      }
      await add(this.form)
        .then(() => {
          this.$message({
            type: "success",
            message: "添加成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "添加失败",
          });
        });
      this.findAll();
    },
    goto(val) {
      // console.log(val);
      localStorage.setItem("uuid", val.uuid);
      this.$router.push("/home/details");
    },
    handleCurrentChange(val) {
      this.page = val;
      // console.log(`当前页: ${val}`);
      this.findAll();
    },
    onSubmit() {
      if (this.formStudent.enable === "在职") {
        this.formStudent.enable = 1;
      } else if (this.formStudent.enable === "离职") {
        this.formStudent.enable = 0;
      } else if (this.formStudent.enable === "") {
        this.setinquire();
      } else {
        this.$message({
          type: "warning",
          message: "输入的目前状态有误，只能是离职/在职",
        });
        return false;
      }
      this.setinquire();
      if (this.formStudent.enable === 1) {
        this.formStudent.enable = "在职";
      } else if (this.formStudent.enable === 0) {
        this.formStudent.enable = "离职";
      }
    },
    async setinquire() {
      const arr = await find(this.formStudent);
      // console.log(this.formStudent.startCreateTime)
      const array = arr.data.data;
      // console.log(arr.data);
      this.totalCount = arr.data.count;
      for (let i = 0; i < array.length; i++) {
        const v = array[i];
        if (v.enable === 1) {
          v.enable = "在职";
        } else {
          v.enable = "离职";
        }
      }
      this.tableData = array;
    },

    async findAll() {
      const res = await find(
        {
          page: this.page,
          limit: this.limit
        }
      );
      const resData = res.data.data;
      // console.log(resData);
      this.totalCount = res.data.count;
      this.tableData = resData.map((v) => {
        if (v.enable === 1) {
          v.enable = "在职";
        } else {
          v.enable = "离职";
        }
        return {
          name: v.name,
          state: v.state,
          inviter: v.inviter,
          createTime: v.createTime,
          teacher: v.teacher,
          id: v.id,
          uuid: v.uuid,
          enable: v.enable,
          school: v.school,
          education: v.education,
        };
      });
    },
  },
};
</script>
<style>
.el-table {
  line-height: 30px;
}
.demo-form:hover {
  box-shadow: 3px 3px 5px 4px #d3dce6;
}
</style>
